<!--
 * @Author: GKN
 * @Date: 2023-07-26 14:26:31
 * @LastEditTime: 2023-07-26 18:17:13
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\goodsList1.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->

<template>
    <div class="card">
        <div class="img">
            <imgView type="ad" :src="url" />
        </div>
        <div class="main">
            <div class="title">{{ title }}</div>
            <div class="desc">
                <div class="price">
                    <span>优惠价￥</span><span>{{ price }}</span>
                </div>
                <div class="btn cursor-p" @click="goBook">立即购买</div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { useRouter } from "vue-router";
const Router = useRouter();
const props = defineProps({
    url: {
        type: String,
        default: "",
    },
    id: {
        type: Number,
        default: "",
    },
    title: {
        type: String,
        default: "",
    },
    price: {
        type: String,
        default: "",
    }
})
const goBook = (item) => {
    Router.push({
        path: '/ach/i4',
        query: {
            title: props.title,
            newsId: props.id
        }
    });
}
</script>
  
<style lang='less' scoped>
.card {
    width: 100%;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    box-sizing: border-box;

    .img {
        width: 100%;
        height: 316px;
        background: #ececec;
    }

    .main {
        padding: 15px 0 0 22px;
        box-sizing: border-box;
        background: #fff;

        .title {
            font-size: 14px;
            color: #333333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            font-weight: bold;

        }

        .desc {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 22px;

            .price {
                color: #d10b00;
                display: flex;
                align-items: center;

                span:first-child {
                    font-size: 16px;
                    margin-right: 10px;
                    line-height: 32px;

                }

                span:last-child {
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 32px;
                }
            }

            .btn {
                width: 98px;
                height: 32px;
                color: #d10b00;
                background: #fff2f1;
                border: 1px solid #d10b00;
                border-radius: 15px;
                line-height: 32px;
                text-align: center;
            }
        }
    }
}</style>
  


